<%@ taglib prefix="stripes"
	uri="http://stripes.sourceforge.net/stripes.tld"%>
<stripes:layout-render name="layout/default.jsp"
	pageTitle="Using A Layout">

	<stripes:layout-component name="pageTitle">
	Bookstore
 	</stripes:layout-component>

	<stripes:layout-component name="html_head">

		<script type="text/javascript">
			function loadBooks() {
				var booksTableBody = "<tbody><tr><th>Name</th><th>Author</th><th>Price</th><th></th></tr>";

				$.ajax({
					url : 'services/books/searchByKeywords',
					data : {
						key : '<%=request.getParameter("key")%>'
					},
					traditional : true,
					async : false,
					dataType : 'json',
					success : function(data) {
						$.each(data, function(i, item) {
							booksTableBody = booksTableBody + '<tr>' + '<td>'
									+ '<a href="displaybook.jsp?id=' + item.id
									+ '">' + item.name + '</a>' + '</td>'
									+ '<td>' + item.author + '</td>' + '<td>'
									+ item.price + '</td>'
									+ '</tr>';
						});
					}
				});

				booksTableBody = booksTableBody + "</tbody>";
				$('#books > tbody').replaceWith(booksTableBody);

				// $("#books").tableSorter();
			}

		

			$(document).ready(function() {
				loadBooks();
			});
		</script>
	</stripes:layout-component>

	<stripes:layout-component name="contents">
	
		<div id="content">
			<table id="books" class="tablesorter">
				<tbody>
				</tbody>
			</table>
		</div>
	</stripes:layout-component>
</stripes:layout-render>